* {
    margin : 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

html,
body {
    font-family: "微软雅黑", sans-serif;
}

#header {
    display   : flex;
    height    : 3.75rem;
    background: #ff841d;

    .a1 {
        display        : inline-block;
        padding        : 1.25rem 0 0 1.25rem;
        text-decoration: none;
        color          : white;
    }

    p {
        display: inline-block;
        font   : 1.375rem/ 3.75rem "";
        color  : white;
        margin : 0 auto;
    }

    img {
        height : 2.5rem;
        width  : 2.5rem;
        padding: .625rem .625rem 0 0;
    }
}

#content {

    ul {
        li {
            height: 6.25rem;
            margin: 1.25rem .5rem;

            a {
                display: flex;

                img {
                    width        : 6.25rem;
                    height       : 6.25rem;
                    padding-right: .625rem;
                }

                .content-word {
                    display        : flex;
                    flex-direction : column;
                    justify-content: space-between;
                    color          : rgb(51, 51, 51);
                    flex-wrap      : wrap;

                    .word-bottom {
                        display        : flex;
                        justify-content: space-between;
                        font-size      : .8125rem;
                        color          : rgb(102, 102, 102);
                        padding-bottom : .9375rem;

                        .icon {
                            width         : 1.5em;
                            height        : 1.5em;
                            vertical-align: -0.15em;
                            fill          : currentColor;
                            overflow      : hidden;
                            margin-left   : 1.875rem;
                            margin-top    : -0.0625rem;
                        }
                    }
                }
            }
        }
    }

}


#page {
    display        : flex;
    justify-content: space-around;
    text-align     : center;
    margin-bottom  : .625rem;

    .prev {
        border          : .0625rem solid #ccc;
        width           : 5rem;
        height          : 2.5rem;
        line-height     : 2.5rem;
        border-radius   : .3125rem;
        background-image: linear-gradient(to bottom, #fff, #f4f4f4);
    }

    .pages {
        height      : 2.5rem;
        width       : 5.625rem;
        border      : .0625rem solid #cccccc;
        padding-left: 1.5625rem;
    }

    .next {
        border          : .0625rem solid #ccc;
        width           : 5rem;
        height          : 2.5rem;
        line-height     : 2.5rem;
        border-radius   : .3125rem;
        background-image: linear-gradient(to bottom, #fff, #f4f4f4);
    }
}


#footer {
    background: rgb(239, 239, 239);

    section {
        padding: .625rem;

        a {
            text-decoration : none;
            color           : #666;
            display         : block;
            font-size       : .8125rem;
            line-height     : 1.875rem;
            border-radius   : .3125rem;
            text-align      : center;
            border          : .0625rem solid #ddd;
            background-image: linear-gradient(#fff, #f4f4f4)
        }
    }

    .rank {
        background     : #ff841d;
        height         : 2.5rem;
        display        : flex;
        justify-content: space-between;
        align-items    : center;
        padding        : 0 .625rem;
        margin-top     : .625rem;

        span:nth-of-type(1) {
            font-size  : 1.125rem;
            line-height: 2.5rem;
            color      : white;
        }

        img {
            width      : 1.25rem;
            height     : 1.25rem;
            padding-top: .3125rem;
        }


    }

    ul {
        display: flex;
        padding: 0;

        a {
            flex: 1;

            li {

                list-style: none;
                text-align: center;
                color     : grey;
                font      : .875rem / 1.875rem "";
                border    : .0625rem solid #ccc;
            }
        }
    }

    .foot {
        height: 3.125rem;

        .p1 {
            padding-top: .625rem;
            font-size  : .625rem;
            text-align : center;

            span {
                color: rgb(110, 110, 110);
            }
        }

        .p2 {
            font-size : .5rem;
            text-align: center;
            color     : rgb(110, 110, 110);
        }
    }
}